import { Channel } from "@/types";
interface CatorgeriesProps {
    onAddChannel?: () => void;
    light?: boolean;
    round?: boolean;
    hideAdd?: boolean;
}
import React, { useState } from "react";
import ChannelItem from "./ChannelItem";

const Catorgeries: React.FC<CatorgeriesProps> = ({
    onAddChannel,
    hideAdd,
    light,
}) => {
    const addChannel = () => {
        onAddChannel && onAddChannel();
    };
    const [channels, setChannels] = useState<Channel[]>([
        { id: "1", title: "All", active: true },
        { id: "2", title: "React" },
        { id: "3", title: "Vue" },
        { id: "4", title: "Angular" },
        { id: "5", title: "Node" },
        { id: "6", title: "Python" },
        { id: "7", title: "Java" },
        { id: "8", title: "Go" },
        { id: "9", title: "Rust" },
    ]);
    const onActiveChanged = (id: string) => {
        setChannels(
            channels.map((channel: Channel) => {
                if (channel.id === id) {
                    return { ...channel, active: true };
                }
                return { ...channel, active: false };
            })
        );
    };
    return (
        <>
            <div className="overflow-hidden overflow-x-auto flex items-center m-3 pt-3 pb-3">
                {!hideAdd && (
                    <div
                        onClick={addChannel}
                        className="rounded-full w-11 h-11 flex justify-center items-center text-gray-900 text-sm mr-3.5 shrink-0 box-border border border-gray-300 sticky left-0 bg-white"
                    >
                        <span className="icon-[mdi--plus]"></span>
                    </div>
                )}
                {channels.map((channel) => (
                    <ChannelItem
                        key={channel.id}
                        channel={channel}
                        onActive={onActiveChanged}
                        light={light}
                    />
                ))}
            </div>
        </>
    );
};

export default Catorgeries;
